<template>
    <div>
        <h1>Vue基础语法HTML模版语法 ----插值语法{{  }} 作用：就将变量插入到标签中</h1>
        <h2>HTML模版语法：在HTML标签中可以写js就是语法</h2>
        <h2>{{ str }}</h2>
        <h2>{{ num }}</h2>
        <h2>{{ obj }}</h2>
        <input type="button" value="num+1" v-on:click="fn"/> 
        <input type="button" value="改变str" @click="fn2"/> 
        <input type="button" value="改变obj" @click="fn3"/>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
//声明一个变量
//ref 实现的响应式数据   数据变了 视图会更新就是响应式数据
let str=ref("好好学习，天天向上")
let num=ref(100)
let obj=ref({
    name:'嘻嘻',
    age:20
})

//const 声明常量的意思
const fn=()=>{
    num.value++;
    console.log(num.value);
}
const fn2=()=>{
    str.value="good good study day day up"
    console.log(str.value);
}
const fn3=()=>{
   obj.value.name="xixi"
}



</script>

<style scoped>

</style>